<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="../common/jspcommon.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<%@include file="../common/meta.jsp" %>
<title><c:out value="${picTopic.name}"/> - 主题 - 果果街</title>
<%@include file="../common/js.jsp" %>
<%@include file="../common/css.jsp" %>
<link href="css/v3/huabao/huabao.css" type="text/css" rel="stylesheet" />

</head>
<body>
<%@include file="../common/header.jsp" %>


<!-- content_v3-->
<div class="w100p">
	<!--adOne-->
	<c:if test="${fn:length(topAdv) > 0}">
		<div class="w980 mg mb15 clearfix">
			<c:forEach items="${topAdv}" var="top">
        		<a target="_blank" href="${top.hyperlink}" class="fl block"><img height="61" src="${top.picture}" class="block r5" alt="${top.title}" /></a>
        	</c:forEach>
	    </div>
	</c:if>
    <!--adOne--end-->
   
    <!-- zhuti_v3show-->
    <div class="w980 mg mb10 clearfix ztshow_v3 pr">
    	<div class="fl pr">
        	<img src="${picTopic.image3}" class="block mainpic" />
            <div class="transbg_v3"></div>
            <div class="info_v3">
            	<h3 class="title_v3 pl10 fl"><a href="javascript:;" class="f16 fb white">主题：<c:out value="${picTopic.name}" /></a></h3>
                <div class="fr white nums_v3">
                	<span>加入画报数</span><i>(</i>${pageModel.totalRecord}<i>)</i>
                    <span class="ml10">围观</span><i>(</i>${picTopic.viewAmount}<i>)</i>
                </div>
            </div>
        </div>
        <div class="fl mt50 ml40">
			<a href="javascript:;" id="join_topic_button" class="join_v3 block">加入主题</a>
            <span class="tc txt_v3 block mt10 lh120 fc9">收藏喝分享各种<br />属于你的风格的商品和图片</span>  
        </div>
       	<img src="images/v3/commonpic/white-connerrt.png" class="connorrt_v3 pa" />
        <img src="images/v3/commonpic/white-connerrb.png" class="connorrb_v3 pa" />
    </div>
    <!-- zhuti_v3show--end-->
    
    <!-- dashseparate_v3-->
    <div class="w980 mg ">
    	<div class="dashseparate_v3 pl10 pr10 pb10"></div>
    </div>
    <!-- dashseparate_v3--end-->
    
    <!-- cpshow-->
    <div class="w980 mg mb10 clearfix" id="cpshow">
    	<div class="cpshowwrap_v3 fl w920" id="topic_detail_content">
    		<c:forEach items="${pageModel.list}" var="pictorial" begin="0" end="2">
	        	<div class="cpwrap_v3 w220 mr10 mb10 fl">
	            	<div class="boxhead_v3 w210 mg pr h5">
	                    <span class="lt"></span>
	                    <span class="rt"></span>	
	        		</div>
	                <div class="cpbody_v3">
	                    <div class="cppic_v3">
	                        <div class="mt5 mb5">
	                        	<ul class="ml10">
	                                <li>
	                                    <a target="_blank" href="picdt.htm?id=${pictorial.identifier}" class="block"><img src="${pictorial.picList4[0].picUrl }_200xXXX.jpg" height="${pictorial.picList4[0].picHeight}" height="${pictorial.picList4[0].picHeight}" class="block" /></a>
	                                </li>
	                            </ul>
	                            <ul class="smallpic_v3 mt5 clearfix ml10">
	                            	<c:forEach items="${pictorial.picList4}" var="doingPictorial" begin="1">
	                            		<li class="fl">
		                            		<a target="_blank" href="picdt.htm?id=${pictorial.identifier}" class="block">
			                            		<img src="${doingPictorial.picUrl}_100x100.jpg" width="64" height="63"/>
			                            	</a>
		                            	</li>
	                            	</c:forEach>
	                            	<c:forEach  begin="${fn:length(pictorial.picList4)}" end="3">
	                            		<li class="fl nopic_v3"></li>
	                            	</c:forEach>
	                            </ul>
	                            <p class="mt10 mb10 f14 lh120 ml10">${pictorial.title}</p>
	                        </div>
	                    </div>
	                    <div class="cpinfo_v3">
	                    	<div class="mt10 mr5 ml10 mb10">
	                        	<div class="mb10 clearfix">
	                                <a target="_blank" href="cover.htm?nid=${pictorial.nickname}" nickname="${pictorial.nickname}" class="pic_v3 block fl mr5"><img src="${pictorial.imageServer}${pictorial.avatar}" width="28" height="28" class="block" /></a>
	                                <div class="fl">
	                                    <a href="javascript:;" nickname="${pictorial.nickname}" class="ff6699 name_v3">${pictorial.nickname}</a>
	                                    <div class="clearfix">
	                                		<span class="fr fc9"><a target="_blank" href="picdt.htm?id=${pictorial.identifier}" class="fc9">评论</a>(${pictorial.commentCount})</span>
	                                		<span class="fr mr10 fc9"><a target="_blank" href="picdt.htm?id=${pictorial.identifier}" class="fc9">围观</a>(${pictorial.viewAmount})</span>
	                            		</div>
	                                </div>
	                            </div>
	                            <c:if test="${fn:length(pictorial.pictorialTopicList) > 0}">
		                            <div class="clearfix">
		                            	<span class="fc9 fl">主题：</span>
		                            	<c:forEach items="${pictorial.pictorialTopicList}" var="pictorialTopic">
		                            		<a target="_blank" href="picTopicDetail.htm?tid=${pictorialTopic.identifier}" class="mr5 lh120"><c:out value="${pictorialTopic.name}" /></a>
		                            	</c:forEach>
									</div>
	                            </c:if>
	                        </div>
	                    </div>
	                </div>
	                <div class="boxfoot_v3 w210 mg pr h5">
	        			<span class="lb"></span>
	            		<span class="rb"></span>	
	       			 </div>
	            </div>
			</c:forEach>
            <div class="cpwrap_v3 w220 mr10 mb10 fl">
            	<div class="boxhead_v3 w210 mg pr h5">
                    <span class="lt"></span>
                    <span class="rt"></span>	
        		</div>
                <div class="cpbody_v3">
                    <div class="cppic_v3">
                    	<div class="mt10 ml10 mr10 mb10 zhuti_v3">
                    		<h3 class="f14 ff6699 fn mb10">主题介绍</h3>
                            <div class="info_v3 mb10 content_v3">
                            	<p class="lh120 mb10">${picTopic.description}</p>
                            </div>
                            <p class="separate_v3 mb10"></p>
                            <h3 class="f14 ff6699 fn mb10">加入主题的作者</h3>
                            <ul class="author_v3">
                            	<c:forEach items="${memberPicList}" var="doingPictorial">
	                            	<li class="clearfix pb5 pt5" style="height: 29px;">            	
	                                    <div class="fl">
	                                    	<a target="_blank" href="cover.htm?fid=${doingPictorial.memberObj.family}" class="block fl mr5"><img width="28" src="${doingPictorial.memberObj.imageServer}${doingPictorial.memberObj.avatar}" class="block" /></a>
	                                        <a target="_blank" href="cover.htm?fid=${doingPictorial.memberObj.family}" class="name_v3 fl">${doingPictorial.memberObj.nickname}</a>
	                                    </div>
	                                    <a target="_blank" href="picdt.htm?id=${doingPictorial.identifier}" class="fc9 fr brief_v3">${doingPictorial.title}</a>
	                                </li>
                                </c:forEach>
                            </ul>
                      	</div>
                    </div>
                </div>
                <div class="boxfoot_v3 w210 mg pr h5">
        			<span class="lb"></span>
            		<span class="rb"></span>	
       			 </div>
            </div>
            <c:forEach items="${pageModel.list}" var="pictorial" begin="3">
	        	<div class="cpwrap_v3 w220 mr10 mb10 fl">
	            	<div class="boxhead_v3 w210 mg pr h5">
	                    <span class="lt"></span>
	                    <span class="rt"></span>	
	        		</div>
	                <div class="cpbody_v3">
	                    <div class="cppic_v3">
	                        <div class="mt5 mb5">
	                        	<ul class="ml10">
	                                <li>
	                                    <a target="_blank" href="picdt.htm?id=${pictorial.identifier}" class="block"><img src="${pictorial.picList4[0].picUrl }_200xXXX.jpg" height="${pictorial.picList4[0].picHeight}" height="${pictorial.picList4[0].picHeight}" class="block" /></a>
	                                </li>
	                            </ul>
	                            <ul class="smallpic_v3 mt5 clearfix ml10">
	                            	<c:forEach items="${pictorial.picList4}" var="doingPictorial" begin="1">
	                            		<li class="fl">
		                            		<a target="_blank" href="picdt.htm?id=${pictorial.identifier}" class="block">
			                            		<img src="${doingPictorial.picUrl}_100x100.jpg" width="64" height="63"/>
			                            	</a>
		                            	</li>
	                            	</c:forEach>
	                            	<c:forEach  begin="${fn:length(pictorial.picList4)}" end="3">
	                            		<li class="fl nopic_v3"></li>
	                            	</c:forEach>
	                            </ul>
	                            <p class="mt10 mb10 f14 lh120 ml10">${pictorial.title}</p>
	                        </div>
	                    </div>
	                    <div class="cpinfo_v3">
	                    	<div class="mt10 mr5 ml10 mb10">
	                        	<div class="mb10 clearfix">
	                                <a target="_blank" href="cover.htm?nid=${pictorial.nickname}" nickname="${pictorial.nickname}" class="pic_v3 block fl mr5"><img src="${pictorial.imageServer}${pictorial.avatar}" width="28" height="28" class="block" /></a>
	                                <div class="fl">
	                                    <a href="javascript:;" nickname="${pictorial.nickname}" class="ff6699 name_v3">${pictorial.nickname}</a>
	                                    <div class="clearfix">
	                                		<span class="fr"><a target="_blank" href="picdt.htm?id=${pictorial.identifier}" class="fc9">评论</a><i class="fc9">(</i>${pictorial.commentCount}<i class="fc9">)</i></span>
	                                		<span class="fr mr10"><a target="_blank" href="picdt.htm?id=${pictorial.identifier}" class="fc9">围观</a><i class="fc9">(</i>${pictorial.viewAmount}<i class="fc9">)</i></span>
	                            		</div>
	                                </div>
	                            </div>
	                            <c:if test="${fn:length(pictorial.pictorialTopicList) > 0}">
		                            <div class="clearfix">
		                            	<span class="fc9 fl">主题：</span>
		                            	<c:forEach items="${pictorial.pictorialTopicList}" var="pictorialTopic">
		                            		<a target="_blank" href="picTopicDetail.htm?tid=${pictorialTopic.identifier}" class="mr5 lh120"><c:out value="${pictorialTopic.name}" /></a>
		                            	</c:forEach>
									</div>
	                            </c:if>
	                        </div>
	                    </div>
	                </div>
	                <div class="boxfoot_v3 w210 mg pr h5">
	        			<span class="lb"></span>
	            		<span class="rb"></span>	
	       			 </div>
	            </div>
			</c:forEach>
        </div>
        <div class="clear"></div>
       <div id="pager" class="h_page"></div>
    </div>
    <!-- cpshow--end-->
    
    <!-- fanye_v3-->
    <!-- fanye_v3--end-->
</div>
<!-- content_v3--end-->

<!-- back_v3-->
<div class="w100p" id="redSlide">
	<div class="w980 mg">
        <div class="back_v3">
            <a href="javascript:;" class="backtop_v3"></a>
            <a href="javascript:;" class="buyinfo_v3"></a>        
        </div>
    </div>
</div>
<!-- back_v3--end-->

<!-- foot-->
<%@include file="../common/footer.jsp" %>
<script src="js/v3/other/interfacejs.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function(){
		//分页方法
		$("#pager").pager({
			pagenumber : "${pageModel.currentPage}",
			pagecount : "${pageModel.totalPage}",
			buttonClickCallback : function(page) {
				location.href = "picTopicDetail.htm?tid=${topicId}&page="+page;
			}
		});
		//图片加载完之后给div赋值样式
		if(${pageModel.totalRecord} > 3){
			$('.cpshowwrap_v3').masonry({
	    		itemSelector : '.cpwrap_v3'
		  	});
		}else{
			var hh = 0;
			$(".cpwrap_v3").each(function(){
				var thisHH = $(this).height();
				if(hh < thisHH){
					hh = thisHH;
				}
			});
			$('.cpshowwrap_v3').height(hh);
		}
	  	
	  	
	  	$("#join_topic_button").click(function(){
	  		if(GUOGUO.checkLogin()){
	  			window.location.href="pictorial.htm?family=${member.family}";
	  		}else{
	  			GUOGUO.memberLogin();
	  		}
	  	});
	  	
	  	<%-- 滚动加载效果 --%>
		var loaded = true;
		var times = 2;
		$(window).bind("scroll", function(){
			<%-- 滚动条到网页头部的 高度 --%>
	        var top = document.documentElement.scrollTop + document.body.scrollTop;
	        <%-- 网页的高度 --%>
	        var textheight = $(document).height();
			if (textheight - top - $(window).height() <= 1500) {
				if(loaded){
					loaded = false;
					<%-- 如果是最后一页，判断是否要取多次 --%>
					if(parseInt("${pageModel.currentPage}")==parseInt("${pageModel.totalPage}") 
							&& ((parseInt("${pageModel.currentPage}")-1)*parseInt("${pageModel.pageSize}")+(times-1)*(parseInt("${pageModel.pageSize}")/10))>=parseInt("${pageModel.totalRecord}")){
						return;
					}
					if(times>10){
						return;
					}
					<%-- 隐藏分页 --%>
					$("#pager").hide();		
					<%-- 隐藏底部 --%>
					$("#footer").hide();
					$.get("picTopicDetailMore.htm?tid=${topicId}&page=${pageModel.currentPage }&times="+times,function(data){
						var $newElems = $(data);	
						$("#topic_detail_content").append($newElems).masonry('appended',$newElems);
						<%-- 删除加载中的层 --%>
						loaded = true;
						<%-- 计算次数，计算这一页取了多少此 --%>
						times++;	
						<%-- 展示分页 --%>
						$("#pager").show();
						<%-- 展示底部 --%>
						$("#footer").show();
				  	});
				}
			}
		});
	  	
	});
	
</script>
<!-- foot--end-->

</body>
</html>
